<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="ddp-layout-popuptype" *ngIf="showFlag">
  <em class="ddp-bg-popup"></em>
  <div class="ddp-ui-popup">
    <!-- title -->
    <div class="ddp-ui-popup-title">
      <span class="ddp-txt-title-name">{{'msg.metadata.catalog.ui.header' | translate }}</span>
      <div class="ddp-ui-pop-buttons">
        <a href="javascript:" class="ddp-btn-pop" (click)="showFlag = false">{{'msg.comm.btn.cancl' | translate}}</a>
        <a href="javascript:" class="ddp-btn-pop ddp-bg-black" (click)="addCatalog()" [ngClass]="{'ddp-disabled': !selectedCatalog.name}">{{'msg.comm.btn.add' | translate}}</a>
      </div>
      <!-- det -->
    </div>
    <!-- //title -->
    <div class="ddp-ui-popup-contents">
      <!-- page -->
      <div class="ddp-page-catalog">
        <!-- root -->
        <div class="ddp-ui-root">
          <!-- create -->
          <div class="ddp-data-create">
            <a href="javascript:" class="ddp-btn-back" *ngIf="isRoot()" (click)="goBack()"></a>
            <span class="ddp-data-name">{{currentRoot.name}}</span>
            <!-- edit -->
            <div class="ddp-data-input" *ngIf="isCreateCatalog">
              <input type="text" placeholder="{{'msg.metadata.catalog.ui.name.ph' | translate }}" #newCatalogName (keypress)="createCatalogByKeypress($event)">
              <em class="ddp-icon-control-check" (click)="createCatalogDone()"></em>
            </div>
            <!-- //edit -->
          </div>
          <!-- //create -->
        </div>
        <!-- //root -->
        <div class="ddp-select-catalog" *ngIf="!isCreateCatalog">
          <ul class="ddp-list-workspace">
            <!--
                add ddp-box-eddit when edit clicked
                add ddp-sub when sub menu is exist
            -->
            <li class="ddp-txt" *ngIf="catalogs.length === 0 && !isRoot()">
              <a href="javascript:">
                <em class="ddp-icon-question2"></em>
                <div class="ddp-wrap-name ">
                  <!-- add ddp-data-new if newly created -->
                  <span class="ddp-data-name "><span class="ddp-data-in">{{'msg.metadata.ui.unclassified' | translate }}</span></span>
                </div>
                <!-- edit -->
              </a>
            </li>
            <li [ngClass]="{'ddp-selected':selectedCatalog && selectedCatalog.id === catalog.id && !catalog.editing, 'ddp-box-edit': catalog.editing, 'ddp-sub':catalog }"
                *ngFor="let catalog of catalogs; let index = index"
                (click)="selectCatalog(catalog)"
                (clickOutside)="cancelEditing(catalog)">
              <a href="javascript:">
                <em class="ddp-icon-folder"></em>
                <div class="ddp-wrap-name">
                  <!-- add ddp-data-new if newly created -->
                  <span class="ddp-data-name"><span class="ddp-data-in">{{catalog.name}}</span></span>
                </div>
                <!-- edit -->
                <div class="ddp-data-input" *ngIf="catalog.editing">
                  <input type="text" placeholder="{{'msg.metadata.catalog.ui.name.ph' | translate }}" value="{{catalog.name}}" #catalogInput (keyup.enter)="updateCatalog(catalog,index)">
                  <em class="ddp-icon-control-check" (click)="updateCatalog(catalog, index)"></em>
                </div>
                <!-- //edit -->
                <div class="ddp-btn-control"></div>
                <em class="ddp-view" (click)="catalogDetail(catalog)"></em>
              </a>
            </li>
          </ul>
        </div>
        <!-- no data -->
        <div class="ddp-nodata" *ngIf="0 === catalogs.length && !isCreateCatalog && 'Root' === currentRoot.name">{{'msg.metadata.catalog.ui.no.cat' | translate }}</div>
        <!-- //no data -->
      </div>
    </div>
  </div>
</div>

<app-delete-modal (deleteConfirm)="deleteCatalog()" (closeOutput)="closeDelete()" [enableCloseOutput]="true"></app-delete-modal>
